<template>
  <div>
    <section>
      <div class="bg1 bg"></div>
      <div style="width: 100%;position: relative;top: 0;height:100%">
        <h1 class="title1">强力4大</h1>
        <h1 class="title12">安全组件支持</h1>
        <p class="onet1">时刻保障您的平台安全</p>
      </div>
      <div class="bgone">
        <div class="bgonebox1">
          <p class="bgonep">认证鉴权</p>
          <p class="bgonepco">认证鉴权</p>
        </div>
        <div class="bgonebox2">
          <p class="bgonep">访问控制</p>
          <p class="bgonepco">访问控制</p>
        </div>
        <div class="bgonebox3">
          <p class="bgonep">数据加密与解密</p>
          <p class="bgonepco">数据加密与解密</p>
        </div>
        <div class="bgonebox4">
          <p class="bgonep">安全审计与监控</p>
          <p class="bgonepco">安全审计与监控</p>
        </div>
      </div>
    </section>
    <section class="box2">
      <div class="bg2 bg"></div>
     
      <div class="bgbox2" style=" transform: translateY(-160px);">
        <h1 class="title2">一键预约全球站点</h1>
        <div class="lunbo2"></div>
        <!-- <p class="title3">调测无忧</p> -->
        <p class="title21">为开发者提供了7x24小时的免费环境，0成本对接真实设备远程调试</p>
        <div class="title22">
          <p>真实设备</p>
          <p>全业务体验</p>
        </div>
        <div class="title23">
          <p>随时随地</p>
          <p>远程接入</p>
        </div>
        <div class="title24">
          <p>按需使用</p>
          <p>自助预约</p>
        </div>
        <img class="bgbox2img" src="../../../../assets/images/电脑.png" >
      </div>
    </section>
    <section class="bgbox3">
      <div class="bg3 bg"></div>
      <h1 class="title31">能力开放平台</h1>
      <h1 class="title32">拥抱更广阔的未来</h1>
    </section>
    <!-- <section>
        <div class="bg"></div>
        <h1>So smooth though</h1>
      </section>
      <section>
        <div class="bg"></div>
        <h1>Nice, right?</h1>
      </section> -->
  </div>
</template>

<script>
import { gsap } from 'gsap';
// ScrollTrigger  多屏滚动效果
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger)
export default {
  name: "Parallax",
  mounted() {
    //后台打印滚动数




    let getRatio = el => window.innerHeight / (window.innerHeight + el.offsetHeight);

    gsap.utils.toArray("section").forEach((section, i) => {
      section.bg = section.querySelector(".bg");

      // Give the backgrounds some random images
      // section.bg.style.backgroundImage = `url(../../../assets/images/g0.jpg)`;

      // the first image (i === 0) should be handled differently because it should start at the very top.
      // use function-based values in order to keep things responsive
      gsap.fromTo(section.bg, {
        backgroundPosition: () => i ? `65% ${-window.innerHeight * getRatio(section)}px` : "100% 0px"
      }, {
        backgroundPosition: () => `70% ${window.innerHeight * (1 - getRatio(section))}px`,
        ease: "none",
        scrollTrigger: {
          trigger: section,
          start: () => i ? "top bottom" : "top top",
          end: "bottom top",
          scrub: true,
          invalidateOnRefresh: true // to make it responsive
        }
      });

    });
    const t1 = gsap.timeline()
    t1.to('.title1', { "translateX": '60px' }, 0.1)


    ScrollTrigger.create({
      trigger: '.box2',
      start: 'top bottom',
      end: '+=950',
      scrub: true,
      animation: gsap.timeline()
        .fromTo('.title2', { x: -1600, }, { x: 0 }, 0.1)
        .fromTo('.title21', { x: -1600, }, { duration: 1, x: 0 }, 0.1)
        .fromTo('.bgbox2img', { opacity: 0 }, { opacity: 1 }, 0.1)

    })
    ScrollTrigger.create({
      trigger: '.box2',
      start: 'top center',
      end: 'b+=45',
      scrub: true,
      animation: gsap.timeline()
        .from('.title22', {
          x: 600,
          opacity: 0
        })
        .from('.title23', {
          x: -600,
          opacity: 0,
          duration: 1,
        })
        .from('.title24', {
          x: 600,
          opacity: 0,
          duration: 1,
        })

    })
    ScrollTrigger.create({
      trigger: '.bgbox3',
      start: 'top center',
      end: '+=600',
      scrub: true,
      animation: gsap.timeline()
        .from('.title31', {
          y: 1000,
          opacity: 0
        })
        .from('.title32', {
          y: 1000,
          opacity: 0,
          duration: 1,
        })


    })

  }
}
</script>

<style scoped lang="scss">
section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg1 {

  background: rgb(25, 165, 111);

}

.box2 {
  position: relative;
}

.bg2 {
  // background: rgb(196, 219, 255);
  background: radial-gradient(rgb(218, 231, 255) 10%, rgb(161, 197, 253) 90%);


}

// .lunbo2 {
//   position: absolute;
//   background-image: url(../../../../assets/images/lunbo2.png);
//   opacity: 0.3;
//   background-repeat: no-repeat;
//   background-size: contain;
//   height: 100%;
//   width: 100%;
//   top: 0;
//   left: -50px;
// }

.bg3 {

  background-image: url(../../../../assets/images/g2.jpg);
}

h1 {

  text-shadow: 4px 3px 10px rgb(0, 26, 2);
  z-index: 1;
  font-size: 4em;
  font-weight: 400;
}

.title1 {

  color: rgb(255, 238, 215);
  animation-duration: 0.7s;
  opacity: 0;
  animation-name: startTitle;
  animation-fill-mode: forwards;
  font-size: 8.5em;
  font-weight: bold;
  height: 70px;
  position: absolute;
  top: 6%;
}

.title12 {
  color: rgb(255, 238, 215);
  animation-duration: 0.7s;
  opacity: 0;
  animation-name: startTitle;
  animation-fill-mode: forwards;
  font-size: 8.5em;
  font-weight: bold;
  height: 70px;
  position: absolute;
  top: 20%;
}

@keyframes startTitle {
  from {
    opacity: 0;
    transform: translateX(-1200px);
  }

  to {
    opacity: 1;
    transform: translateX(60px);
  }

}

.onet1 {
  position: absolute;
  bottom: 0;
  opacity: 0;
  animation-name: oneTitleFirst;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  color: rgba(255, 255, 255, 0.349);
  font-size: 10em;
  animation-delay: 0.5s;
  margin-left: 27%;
  letter-spacing: 10px;
  margin-bottom: 0;
  width: 100%;
  font-weight: bold;


}

@keyframes oneTitleFirst {
  from {
    opacity: 0;
    transform: translate(-1200px);

  }

  to {
    opacity: 1;
    transform: translate(-400px);

  }
}

@keyframes ngonestart {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ngonestartp1 {
  from {
    transform: translate(1000px);
  }

  to {
    transform: translate(0px);
  }
}

.bgone {
  position: absolute;
  right: 0;
  top: 0;
  width: 600px;
  height: 100%;

  padding-top: 340px;
  opacity: 0;

  animation-fill-mode: forwards;
  animation-name: ngonestart;

  div {
    position: relative;
    width: 100%;
    height: 90px;
    margin-bottom: 20px;
    padding: 0;
    padding-right: 60px;
    overflow: hidden;
    transform: translate(1000px);


    .bgonep {
      font-size: 60px;
      font-weight: bold;
      width: 100%;
      text-align: right;
      margin: 0;
      color: rgb(218, 218, 218);
      transition: all 0.5s;
    }

    .bgonepco {
      color: rgba(42, 207, 125, 0.671);
      font-size: 60px;
      font-weight: bold;
      width: 100%;
      text-align: right;
      margin: 0;
      transition: all 0.5s;

    }

    &:hover p {
      transform: translateY(-80px);
      transition: all 0.5s;

    }


  }

  .bgonebox1 {
    animation-name: ngonestartp1;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    background: rgb(0, 0, 0);
    border-left: 15px solid #4562a1;
    transition: all 0.5s;


    &:hover {
      border-left: 60px solid rgb(158, 202, 186);

    }

  }

  .bgonebox2 {
    transform: translate(1000px);
    animation-name: ngonestartp1;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-delay: 1.3s;
    background: rgb(0, 0, 0);
    border-left: 15px solid #4562a1;
    transition: all 0.5s;

    &:hover {
      border-left: 60px solid rgb(158, 202, 186);
    }

  }





  .bgonebox3 {
    transform: translate(1000px);
    animation-name: ngonestartp1;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-delay: 1.6s;
    background: rgb(0, 0, 0);
    border-left: 15px solid #4562a1;
    transition: all 0.5s;

    &:hover {
      border-left: 60px solid rgb(158, 202, 186);
    }


  }

  .bgonebox4 {
    transform: translate(1000px);
    animation-name: ngonestartp1;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-delay: 1.9s;
    background: rgb(0, 0, 0);
    border-left: 15px solid #4562a1;
    transition: all 0.5s;

    &:hover {
      border-left: 60px solid rgb(158, 202, 186);
    }

  }
}

.title2 {
  text-shadow: none;
  color: rgba(90, 90, 90, 0.349);
  font-size: 10em;
  font-weight: bold;
  transform: translateX(-1500px);
  transform: translateY(-150px);
  animation-duration: 0.6s;
  z-index: 999;


}


.bgbox2 {
  position: relative;

  img {
    position: absolute;
    height: 400px;
    top: calc(45%);
    left: calc(50% - 200px);
    opacity: 0;
  }

  .title21 {
    width: 100%;
    text-align: center;
    transform: translateX(-1500px);
    transform: translateY(-260px);
    color: white;
    text-shadow: 4px 3px 10px rgb(0, 39, 83);
    font-size: 1.5em;

  }




  .title22 {
    position: absolute;
    top: 300px;
    width: 300px;
    background: rgb(255, 195, 126);
    height: 150px;
    border-radius: 50px;
    color: white;
    text-align: center;
    font-size: 2.5em;
    box-shadow: inset 0px 15px 15px -15px #fff8ef,
      inset 0px -15px 15px -15px #251a04;

    p {
      margin: 0;
      margin-top: 10px;
    }

  }

  .title23 {
    position: absolute;
    top: 400px;
    width: 300px;
    right: -100px;
    background: rgb(138, 206, 186);
    height: 150px;
    border-radius: 50px;
    color: white;
    text-align: center;
    font-size: 2.5em;
    box-shadow: inset 0px 15px 15px -15px #ecfff7,
      inset 0px -15px 15px -15px #065031;

    p {
      margin: 0;
      margin-top: 10px;
    }
  }

  .title24 {
    position: absolute;
    top: 600px;
    width: 300px;

    background: rgb(182, 206, 138);
    height: 150px;
    border-radius: 50px;
    color: white;
    text-align: center;
    font-size: 2.5em;
    box-shadow: inset 0px 15px 15px -15px #e6fff4,
      inset 0px -15px 15px -15px #065031;

    p {
      margin: 0;
      margin-top: 10px;
    }
  }
}

.bgbox3 {

  .title31 {
    position: absolute;
    top: 30%;
    left: auto;
    color: white;
    font-size: 7em;
    text-shadow: 2px 2px 5px rgb(0, 0, 0);
  }

  .title32 {
    position: absolute;
    top: 45%;
    left: auto;
    color: white;
    font-size: 7em;
    text-shadow: 2px 2px 5px rgb(0, 0, 0);
  }

}
.lunbo2 {
  position: absolute;
  top:150px;
  left:0;
  background-image:url(../../../../assets/images/lunbo.png) ;
    // background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;

    transform: scale(1.4);
}
</style>